
const boxDom: Element | null = document.querySelector('.box')

interface ItemType {
    title: string,
    children?: any[]
}

// 枚举
enum Color {
    "#ccc" = 1,
    "skyblue",
    "red"
}


enum TttpsCode {
    '找不到页面' = 404,
    '服务器错误' = 500,
    '页面无权限' = 401,
    '请求成功' = 200,
    '页面无更新' = 300,
    '账户密码错误' = 402,
}

enum Code {
    '待付款',
    '待发货',
    '已发货',
    '代签收',
    '已签收',
    '待评论',
}

enum textCode {
    "dfk" =  "待付款"
}

enum Dialog {
    "成功"= 'green',
    "失败"= 'red',
    "消息"= 'skyblue',
    "警告"= 'yellow',
}


// 记录递归层级
let num = 0

// 递归遍历
const menuArr = (arr: ItemType[], num: number): string => {
    num += 1
    const newArr = arr.map(item => {
        return `<div>
            <p style="background: ${Color[num]}">${item.title}</p>
            ${!item.children ? '' : `<div class="menuItem">
                ${menuArr(item.children, num)}
                </div>`}
        </div>`
    }).join('')
    return newArr
}

// 点击事件
const bindEvent = () => {
    // 获取所有的p标签  Array.from  将伪数组 转换为数组
    const pDom: Element[] | null = Array.from(document.querySelectorAll('p'))

    pDom.forEach(item => {
        item.addEventListener('click', (e: any) => {
            if (item.nextElementSibling) {
                let isShow: string = e.target.nextElementSibling.style.display

                if (isShow === 'block') {
                    e.target.nextElementSibling.style.display = 'none'
                } else {
                    e.target.nextElementSibling.style.display = 'block'
                }
            }
        })
    })
}

const render = () => {
    (boxDom as Element).innerHTML = menuArr(menu, num)

    bindEvent()
}

render()